/* eslint-disable no-unused-expressions */
//根组件
import { useRoutes, Link, useNavigate, NavLink } from 'react-router-dom'
import { Suspense, lazy, useState, useEffect } from 'react'
import "./App.scss"
// import Layout from './pages/Layout'
// import Home from './pages/Home/Home'
import NotFound from './pages/NotFound/NotFound'
import { Input, } from 'antd'
const Layout = lazy(() => import('./pages/Layout'))
const Home = lazy(() => import('./pages/Home/Home'))

const { Search } = Input
const routerlist = [{
  path: '/',
  element: <Layout />,
},
{
  element: <Home />,
  path: '/home'
},

// 增加n个路由对应关系
{
  path: '*',
  element: <NotFound />,
},]
function WrapperRoutes () {
  let element = useRoutes(routerlist)
  return element
}
function App () {
  const [group, setgroup] = useState('')
  const navigate = useNavigate()
  const onSearch = (value) => {
    setgroup(value,)


  }
  useEffect(() => {
    navigate(group && `/home?group=${group}`)
  }, [group])

  return (
    <>
      <nav className='nav w'>
        <span className='logo-font'>阳光沙滩-券场</span>
        <ul>
          <li ><Link to='/' >发现</Link> </li>
          <li>券厂</li>
          <li><Link to='/home' >特惠</Link> </li>
        </ul>
        <div className='search-b'>
          <Search
            placeholder="input search text"
            allowClear
            enterButton="Search"
            onSearch={onSearch}
            className='search'
          />
        </div>

      </nav>
      <div className="App">
        <Suspense fallback={
          <div className="loading w">
            <h3>正在拼命加载...客官勿急...</h3>
          </div>}>
          <WrapperRoutes />
        </Suspense>
      </div>
    </>
  )
}

export default App
